<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div ref='title'>元素</div>
        <button @click="ddd">自增</button>
        <Child ref="child"></Child>

    </div>

    
    <script id="child" type="text/x-template">
        <div>
          <h3>子组件 -- {{num}}</h3>
        </div>
    </script>
    <script src="./js/vue.js"></script>
    <script>

        const Child = {
            template: '#child',
            data() {
                return { num: 100 }
            },
            methods: {
                ddd(n = 1) {
                    this.num += n
                }
            }
        }




        // 根组件
        const app = new Vue({
            el: '#app',
            data:{
                num:1
            },

            components: { Child },
            methods: {
                ddd() {
                    this.$refs['child'].ddd(10)

                }
            }
        })





    </script>
</body>

</html>